<template>
  <div class="page-container">
    <DynamicForm :config="dyConfig" :questions="dyQuestions" ref="dynamicForm"></DynamicForm>
    <DynamicTable :tables="dyTable" :config="dyTableConfig" :icons="dyIcons" ref="dynamicTable">
      <!--状态-->
      <template #stateSwitch="{ record }">
        <a-switch :checked="record.status" checked-children="开" un-checked-children="关" :checked-value="1" :un-checked-value="0" @change="(value) => statusChange(record, value)" />
      </template>
    </DynamicTable>
    <AddDialog v-model:visible="state.showAdd" v-if="state.showAdd" :detailId="state.detailId" @refresh="getPageData" :show-type="state.showType"></AddDialog>
  </div>
</template>

<script lang="ts" setup>
import { createVNode, getCurrentInstance, onBeforeUnmount, reactive, ref } from 'vue';
import { DynamicForm, DynamicTable } from '@/components/public-template';
import { Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { DYNAMICLOCALICONS, DYNAMICLOCALTABLE } from '@/mixins/subject/subject-types';
import { filter } from 'rxjs/operators';
import { Api, page, changeStatus } from '@/config/api/fileAuthority';
import indexService from './index.service';
import AddDialog from './components/addDialog.vue';

const state = reactive({
  showAdd: false,
  showType: 'ADD',
  detailId: ''
});
const dyConfig: any = {
  queryUrl: Api.page,
  protType: 'post',
  labelCol: 6,
  wrapperCol: 18,
  grid: 8,
  style: 'table-form',
  cancelSave: true
};
const dyTableConfig: any = {
  queryUrl: Api.page,
  protType: 'post',
  isScreen: true,
  rowSelection: {
    type: 'checkbox'
  }
};
const dyQuestions: any = reactive(indexService.getQuestions());
const dyTable: any = reactive(indexService.getTables());
const dyIcons: any = reactive(indexService.getIcons());
const dynamicForm = ref(null);
const dynamicTable = ref(null);
// 监听table
const { proxy }: any = getCurrentInstance();
const subscribeSub = proxy.$NotificationPubSub
  .getParams()
  .pipe(filter((res) => res !== 0))
  .subscribe((item: any) => {
    if (item.key === DYNAMICLOCALICONS && item.value.value === '添加') {
      state.showAdd = true;
      state.showType = 'ADD';
    } else if (item.key === DYNAMICLOCALTABLE && item.value.part.key === 'code') {
      state.showAdd = true;
      state.showType = 'VIEW';
      state.detailId = item.value.data.id;
    }
  });
// 更改状态时触发
function statusChange(record, value) {
  Modal.confirm({
    title: '提示',
    icon: createVNode(ExclamationCircleOutlined),
    okText: '确定',
    cancelText: '取消',
    content: '是否确定修改状态？',
    onOk() {
      changeStatus({ id: record.id, status: record.status === 0 ? 1 : 0 }).then(() => {
        getPageData();
      });
    }
  });
}
const getPageData = () => {
  page({}).then(() => {
    dynamicTable.value.getData();
  });
};
onBeforeUnmount(() => {
  subscribeSub && subscribeSub.unsubscribe();
  proxy.$NotificationPubSub.clearParams();
});
</script>

<style lang="less" scoped></style>
